<template>
  <div class="news">
    <!-- 头部 -->
    <div class="news_top">
      <span class="iconfont icon-guanbi" @click="$router.go(-1)"></span>
      <span>资讯详情</span>
    </div>
    <!-- 标题 -->
    <div class="news_title">
      <p>王者荣耀姜子牙重做上线，新技能三段大招还能突破等级上限</p>
    </div>
    <!-- 新闻作者 -->
    <div class="news_author">
      <div class="img">
        <img
          src="https://inews.gtimg.com/newsapp_ls/0/10801646753_200200/0"
          alt=""
        />
        <p>
          <img
            src="https://inews.gtimg.com/newsapp_ls/0/14876051701/0"
            alt=""
          />
        </p>
      </div>
      <div class="text">
        <p>Aggro电竞</p>
        <p>2022年11月10日18:30</p>
      </div>
    </div>

    <!-- 内容 -->
    <div class="news_content">
      <p>
        经过近乎一个赛季时间的铺垫后，王者荣耀姜子牙终于在玩家的期盼中重做上线。作为一名定位亦法亦辅的英雄，姜子牙在过去的时光中是王者荣耀玩家上分的得力助手。而在本次姜子牙这位英雄重做之后，其玩法得到了不小的变动，并且其所属的皮肤也拥有了新的面貌。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419294752/641" alt="" />
    </div>

    <!-- 内容 -->
    <div class="news_content">
      <p>
        在姜子牙全新的被动技能封神中，王者荣耀给予了姜子牙突破英雄等级的玩法。根据其技能内容的介绍，姜子牙在达到15级之后便会获得封神之力，自己将会突破固有的等级到达最高25级。同时该能力还能和一名队友分享，使之最高等级也能达到25级。而按照英雄在等级上的加成属性来算，姜子牙的新被动在后期有着不俗的作用。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="	https://inews.gtimg.com/newsapp_bt/0/15419294770/641" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        除了这个过于亮眼的被动技能外，姜子牙的一技能和原来并无太大差别。当姜子牙释放一技能造成伤害的同时，也会对目标造成降低双抗、减速以及增加自己移速的效果。不过在姜子牙二技能上，全新的机制让其变为一个需要技巧的控制。当姜子牙释放二技能时，将产生一个固定的法阵对敌人造成三次伤害，并在短暂的延迟后造成击飞和伤害。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419294786/641" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        相比于原来命中后就带来的击退效果，这个技能的释放明显需要一些技巧，为玩家增加了挑战性。而在重做后的姜子牙大招中，蓄力时间变得只会影响大招距离而不再和大招伤害挂钩。并且在玩家释放姜子牙的大招时，原本一下的击中效果变成了三下，并且在姜子牙达到15级还能对建筑造成10%的伤害，算是法师中威力比较巨大的大招了。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_match/0/15419294751/0" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        不仅如此，在姜子牙被优化重做之后，其数个皮肤也得到了相应的调整和优化。比如原来身为伴身皮肤的“时尚教父”，在姜子牙重做之后就成为了勇者品质的皮肤，并且拥有了全款蓝色的伴生特效。包括炽热元素使这款活动皮肤，在姜子牙重做也得到了特效品质上的改变和提升。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="	https://inews.gtimg.com/newsapp_bt/0/15419294811/641" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        不过在新版姜子牙的玩法上，其输出的能力已经被大大增强。并且由于被动提升最高等级的特性存在，因此姜子牙需要尽可能的多吃线，才能提升自己的等级让被动更早的起作用。所以比起旧版亦法亦辅的存在，现版本的姜子牙中路的定位明显更合适。而在出装的选择上，目前版本的姜子牙由于技能的多段位依旧可以首选面具。
      </p>
    </div>

    <!-- 图片 -->
    <div class="news_img">
      <img src="https://inews.gtimg.com/newsapp_bt/0/15419294797/641" alt="" />
    </div>
    <!-- 内容 -->
    <div class="news_content">
      <p>
        而对于全新的整套输出机制，玩家可以选用进攻性强的法装进行搭配，包括回响之杖、帽子和法穿杖，让姜子牙在团战中打出不俗的输出。那么对于全新的姜子牙，大家觉得是比原来强还是弱呢？
      </p>
    </div>

    <!-- 评论 -->
    <div class="news_commit">
      <div class="news_commit_top">
        <div class="left">评论</div>
        <div class="right">{{ news_commit_content_lists.length }}条评论</div>
      </div>
      <div class="news_commit_content">
        <div
          class="news_commit_content_item"
          v-for="item in news_commit_content_lists"
          :key="item.id"
        >
          <div class="img">
            <img :src="item.img" alt="" />
          </div>
          <div class="text">
            <p>{{ item.name }}</p>
            <p>
              <span>{{ item.content }}</span>
              <span
                class="iconfont icon-dianzan"
                v-if="!item.checked"
                @click="commit_toggle(item.id)"
              ></span>
              <span
                class="iconfont icon-dianzan_kuai"
                v-if="item.checked"
                @click="commit_toggle(item.id)"
              ></span>
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- 输入的评论 -->
    <div class="news_commit_input">
      <input
        type="text"
        placeholder="请发表你的评论"
        v-model="commit_info"
        @keydown.enter="add_commit"
      />
      <p @click="add_commit">发表</p>
    </div>

    <!-- 信息列表 -->
    <router-link
      tag="div"
      to="/infodetailstwo"
      class="info_item"
      v-for="item in whole"
      :key="item.id"
    >
      <div class="info_item_left">
        <p>{{ item.introduce }}</p>
        <p>
          <span>{{ item.author }}</span>
          <span>{{ item.time }}</span>
        </p>
      </div>
      <div class="info_item_right">
        <img :src="item.img" alt="" />
      </div>
    </router-link>
  </div>
</template>

<script>
import { getInfodetailsData } from "../api/home.js";
export default {
  data() {
    return {
      news_commit_content_lists: [
        {
          id: 1,
          img: "https://qidian.qpic.cn/qd_face/349573/8227120/100",
          name: "骨灰书迷虫",
          content: "好看",
          checked: false,
        },
        {
          id: 2,
          img: "https://qidian.qpic.cn/qd_face/349573/235/100",
          name: "吉布阿杰",
          content: "不错",
          checked: false,
        },
      ],
      commit_info: "",
      commit_id: 10,
      whole: null,
    };
  },
  methods: {
    // 点赞切换
    commit_toggle(id) {
      let index = this.news_commit_content_lists.findIndex(
        (item) => item.id == id
      );
      this.news_commit_content_lists[index].checked =
        !this.news_commit_content_lists[index].checked;
      if (this.news_commit_content_lists[index].checked) {
        this.$toast("点赞成功");
      } else {
        this.$toast("点赞取消");
      }
    },
    //添加评论
    add_commit() {
      let name = this.commit_info;
      this.news_commit_content_lists.push({
        id: this.commit_id,
        img: "https://img2.baidu.com/it/u=2483610998,3588558036&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668186000&t=b5a28ce019027131c469023389fb6bc9",
        name: "坤坤",
        content: name,
        checked: false,
      });
      this.commit_info = "";
      this.commit_id += 1;
      this.$toast("评论成功");
    },
  },
  created() {
    getInfodetailsData().then((data) => {
      console.log(data);
      this.whole = data;
    });
  },
};
</script>

<style lang="scss" scoped>
// 输入的评论
.news_commit_input {
  padding: 15px;
  padding-top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  input {
    flex: 1;
    border: none;
    color: #adadad;
    background: #ebebeb;
    padding: 8px 0;
    border-radius: 20px;
    text-indent: 15px;
  }
  p {
    padding: 8px;
  }
}

// 评论
.news_commit {
  .news_commit_top {
    display: flex;
    padding: 10px 15px;
    padding-top: 5px;
    padding-bottom: 0;
    align-items: center;
    .left {
      color: #191919;
      font-weight: 700;
      font-size: 20px;
    }
    .right {
      color: #ccc;
      font-size: 16px;
      margin-left: 10px;
    }
  }
  .news_commit_content {
    padding: 15px;
    .news_commit_content_item {
      display: flex;
      margin-bottom: 10px;
      .img {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        overflow: hidden;
        border: 1px solid rgba(0, 0, 0, 0.08);
        img {
          width: 100%;
          height: 100%;
        }
      }
      .text {
        margin-left: 10px;
        flex: 1;
        p {
          &:nth-child(1) {
            font-weight: 700;
            font-size: 14px;
          }
          &:nth-child(2) {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            .iconfont {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }
}
.news {
  position: relative;
}
// 头部
.news_top {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  padding: 15px 0;
  display: flex;
  align-items: center;
  z-index: 999;
  background-color: #ffa200;
  color: #ffffff;
  span {
    &:nth-child(1) {
      font-size: 22px;
      margin-left: 12px;
    }
    &:nth-child(2) {
      text-align: center;
      flex: 1;
    }
  }
}
// 标题
.news_title {
  margin-top: 52px;
  padding-left: 15px;
  padding-right: 15px;
  p {
    font-family: "PingFang SC", Helvetica, Arial, "微软雅黑", "黑体";
    color: var(--t1);
    font-weight: 600;
    padding: 5px 0;
    font-size: 18px;
  }
}
// 新闻作者
.news_author {
  display: flex;
  padding: 0 15px;
  margin: 15px 0;
  .img {
    width: 36px;
    height: 36px;
    position: relative;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
    p {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 12px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .text {
    flex: 1;
    p {
      &:nth-child(1) {
        font-weight: 500;
        height: 16px;
        line-height: 16px;
        font-size: 14px;
      }
      &:nth-child(2) {
        color: #a6a6a6;
        font-size: 14px;
        height: 18px;
        line-height: 18px;
      }
    }
  }
}
// 内容
.news_content {
  padding: 0 15px;
  margin: 10px 0;
  p {
    font-size: 18px;
    line-height: 29px;
    color: #222;
  }
}
// 图片
.news_img {
  width: 345px;
  height: 189px;
  padding: 0 15px;
  margin: 10px 0;
  img {
    width: 100%;
    height: 100%;
  }
}
.info_item {
  display: flex;
  padding: 0 10px;
  margin: 10px 0;
  .info_item_left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    p {
      &:nth-child(1) {
        font-size: 14px;
        color: rgb(34, 34, 34);
        font-weight: 600;
        font-family: 黑体;
      }
      &:nth-child(2) {
        display: flex;
        justify-content: space-between;
        span {
          color: rgb(120, 122, 130);
          font-size: 13px;
          transform: scale(0.85, 0.85);
        }
      }
    }
  }
  .info_item_right {
    border-radius: 10px;
    overflow: hidden;
    width: 117px;
    height: 80px;
    margin-left: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
